<!--
 * @Author: your name
 * @Date: 2022-04-27 09:35:26
 * @LastEditTime: 2024-03-14 14:40:42
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jzjy\src\views\ActiveCenter\index.vue
-->
<template>
  <div id="container">
    <div class="top">
      <div class="bread">
        <span>当前位置：</span>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: routeurl }" v-if="isSearch"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ path: '/' }" v-if="!isSearch"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ path: '/active' }"
            >活动中心</el-breadcrumb-item
          >
          <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <!-- v-drag -->
    <div class="activeTop">
      <div
        class="videoBox"
        v-if="!isLh && bm_status == 1"
        v-show="
          (video_file_url != '' && video_file_url != '*') || zb_file_url != ''
        "
        @contextmenu.prevent="menuPlayer()"
      >
        <LivePlayer
          ref="livePlayer"
          :videoUrl="zb_file_url"
          fluent
          autoplay
          live
          aspect
          stretch
          controls
          show-custom-button
          :dblclick-fullscreen="false"
          :hide-fullscreen-button="true"
          :hide-snapshot-button="true"
          :hide-stretch-button="true"
          v-if="zb_file_url != ''"
        >
        </LivePlayer>
        <LivePlayer
          ref="livePlayer"
          :videoUrl="video_file_url"
          autoplay
          :poster="file_url"
          v-if="video_file_url != '' && video_file_url != '*'"
          controls
          :hide-snapshot-button="true"
          :dblclick-fullscreen="false"
          :hide-fullscreen-button="true"
          :hide-stretch-button="true"
          @timeupdate="haha"
        >
        </LivePlayer>
        <!-- <div class="zhezhao" v-if="playFlag">
          <div class="block"></div>
          <img src="../../assets/img/play.png" @click="goFullScreen" />
        </div> -->
      </div>
      <!-- 被拉黑 -->
      <div
        class="videoBox lhUser"
        v-if="isLh && bm_status == 1 && zb_status != 1"
      >
        <div class="videoBg">
          <img src="../../assets/img/videoBg.png" alt="" />
          <p>
            <i class="el-icon-video-camera"></i> 您已被拉黑，无法继续观看直播
          </p>
        </div>
      </div>
      <!-- 未报名 -->
      <div class="videoBox lhUser" v-if="bm_status == 0 && type_id == 1">
        <div class="zhezhao">
          <div class="block"></div>
          <img src="../../assets/img/play.png" />
        </div>
        <img :src="file_url" alt="" style="width: 100%" />
        <div class="videoBg">
          <img src="../../assets/img/videoBg.png" alt="" />
          <p>
            <i class="el-icon-video-camera"></i> 报名活动后，才可以观看直播！
          </p>
        </div>
      </div>
      <!-- 已报名 在预约中 -->
      <div
        class="videoBox lhUser"
        v-if="bm_status == 1 && zb_status == 1 && type_id == 1"
      >
        <div class="zhezhao">
          <div class="block"></div>
          <img src="../../assets/img/play.png" @click="goFullScreen" />
        </div>
        <img :src="file_url" alt="" style="width: 100%" />
        <div class="videoBg">
          <img src="../../assets/img/videoBg.png" alt="" />
          <p><i class="el-icon-video-camera"></i> 已报名，敬请期待直播开始！</p>
        </div>
      </div>
      <!-- 直播一开始，但没有拉流地址 -->
      <div
        class="videoBox lhUser"
        v-if="
          bm_status == 1 && zb_status == 2 && zb_file_url == '' && type_id == 1
        "
      >
        <div class="zhezhao">
          <div class="block"></div>
          <img src="../../assets/img/play.png" @click="goFullScreen" />
        </div>
        <img :src="file_url" alt="" style="width: 100%" />
        <div class="videoBg">
          <img src="../../assets/img/videoBg.png" alt="" />
          <p>
            <i class="el-icon-video-camera"></i> 直播即将开始，请您耐心等待！
          </p>
        </div>
      </div>
      <!--  直播已结束暂无回放 -->
      <div
        class="videoBox lhUser"
        v-if="
          bm_status == 1 &&
          zb_status == 3 &&
          video_file_url == '' &&
          zb_file_url == '' &&
          type_id == 1
        "
      >
        <div class="zhezhao">
          <div class="block"></div>
          <img src="../../assets/img/play.png" @click="goFullScreen" />
        </div>
        <img :src="file_url" alt="" style="width: 100%" />
        <div class="videoBg">
          <img src="../../assets/img/videoBg.png" alt="" />
          <p>
            <i class="el-icon-video-camera"></i>回放已结束，敬请关注下期活动
          </p>
        </div>
      </div>
      <!--  回放已下架 -->
      <div
        class="videoBox lhUser"
        v-if="
          bm_status == 1 &&
          zb_status == 3 &&
          video_file_url == '*' &&
          type_id == 1
        "
      >
        <div class="zhezhao">
          <div class="block"></div>
          <img src="../../assets/img/play.png" @click="goFullScreen" />
        </div>
        <img :src="file_url" alt="" style="width: 100%" />
        <div class="videoBg">
          <img src="../../assets/img/videoBg.png" alt="" />
          <p>
            <i class="el-icon-video-camera"></i>回放已结束，敬请关注下期活动！
          </p>
        </div>
      </div>
      <!-- 未报名 直播已结束有回放 -->
      <!-- <div
        class="videoBox lhUser"
        v-if="bm_status == 0 && video_file_url != ''"
      >
        <LivePlayer
          ref="livePlayer"
          :videoUrl="video_file_url"
          autoplay
          :poster="file_url"
          controls
          :hide-snapshot-button="true"
          :dblclick-fullscreen="false"
          :hide-fullscreen-button="true"
          :hide-stretch-button="true"
          @getDuration="haha"
        >
        </LivePlayer>
      </div> -->
      <!-- 系列活动播放 -->
      <div class="videoBox lhUser" v-if="!isLh && type_id == 2 && xiliezhezhao">
        <div class="zhezhao">
          <div class="block"></div>
          <img src="../../assets/img/play.png" @click="studyXl" />
        </div>
        <img :src="file_url" alt="" style="width: 100%" />
        <!-- <div class="videoBg">
          <img src="../../assets/img/videoBg.png" alt="" />
          <p>
            <i class="el-icon-video-camera"></i> 
          </p>
        </div> -->
      </div>

      <div class="msg">
        <h2>
          {{ title }}
          <span @click="seeacbaogao" v-if="baogaoLists"
            ><img
              src="../../assets/img/4.2/4.2acreport.png"
            />查看活动报告</span
          >
        </h2>
        <p>
          适用范围：<span>{{ syfw_info }}</span>
        </p>
        <p v-if="type_id == 1">
          活动时间：<span
            >{{ timeStamp2String(start_time * 1000, 1) }} ({{
              timeStamp2String(start_time * 1000, 11)
            }}) {{ timeStamp2String(start_time * 1000, 5) }}</span
          >
        </p>
        <p v-if="type_id == 2">
          活动时间：<span
            >{{ timeStamp2String(start_time * 1000, 1) }} ({{
              timeStamp2String(start_time * 1000, 11)
            }}) </span
          >
          --
          <span
            >{{ timeStamp2String(end_time * 1000, 1) }} ({{
              timeStamp2String(end_time * 1000, 11)
            }}) </span
          >
        </p>
        <div class="bottom">
          <div class="ewm">
            <img :src="ewm_file_url" alt="" />
            <div class="sao">
              <p>微信扫一扫</p>
              <p>移动端观看</p>
            </div>
          </div>
          <button @click="baoming" v-if="bm_status == 0 && type_id == 1">
            报名活动
          </button>
          <button @click="yuyue" v-if="bm_status == 0 && type_id == 2">
            预约课程
          </button>
          <button @click="goFullScreen" v-if="bm_status == 1">
            前往直播间
          </button>
          <button style="display: none" @click="click1">ceshi</button>
        </div>
      </div>
    </div>
    <div class="signSuccessBox">
      <el-dialog
        :visible.sync="signSuccess"
        width="320px"
        top="30vh"
        :before-close="signSuccessClose"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <div class="top">
          <img src="../../assets/img/duigou.png" alt="" />
          <h3>恭喜您，活动报名成功！</h3>
        </div>
        <!-- <div class="signSuccessContent">
          <h3>请您添加客服微信，领取本年级教师 学习数据！</h3>
          <div class="pic">
            <img :src="kfevm" alt="" />
          </div>
          <p>打开微信扫码添加客服</p>
        </div> -->
      </el-dialog>
    </div>
    <div class="yuyueevm">
      <el-dialog :visible.sync="xilieyuyueshow" width="400px" top="30vh">
        <div class="yyevmContent">
          <div class="top"></div>
          <h3>
            获取系列课程仅支持<span style="color: #f6444e">团体预约</span
            >观看，如有需要请微信添加客服进行课程预约
          </h3>
          <div class="signSuccessContent">
            <div class="pic">
              <img :src="dqkfevm" alt="" />
            </div>
            <p>打开微信扫码添加客服</p>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="content">
      <div class="left">
        <div class="tapsHeader">
          <div
            class="taps"
            v-for="item in activitymenu_lists"
            :key="item.id"
            :class="{ choseTaps: tapsRadio == item.id }"
            @click="choseTaps(item.id)"
          >
            <div class="tapsTitle">{{ item.title }}</div>
            <span></span>
          </div>
        </div>
        <!-- 活动介绍 -->
        <div class="tab1" v-if="tapsRadio == 1 && contents != ''">
          <div v-html="contents"></div>
        </div>
        <!-- 活动介绍无内容展示 -->
        <div class="tab11" v-if="tapsRadio == 1 && contents == ''">
          <div class="nothing">
            <img src="../../assets/img/nothing.png" alt="" />
          </div>
        </div>
        <!-- 活动目录 -->
        <div class="tab8" v-if="tapsRadio == 9">
          <div class="danyuan" v-for="item in zhang_lists" :key="item.id">
            <div class="mltitle" @click="choseDy(item.id, item.zytj_status)">
              <h3>{{ item.title }}</h3>
              <div class="jiantou">
                <span
                  ><img
                    src="../../assets/img/acrestop.png"
                    v-if="mulutapValue == item.id"
                /></span>
                <span
                  ><img
                    src="../../assets/img/acresdown.png"
                    v-if="mulutapValue != item.id"
                /></span>
              </div>
            </div>
            <div
              class="muluLists"
              v-show="mulutapValue == item.id"
              :class="{
                nowmulu: zhangjie_id == list.id,
                beforemulu: list.start_time_true * 1000 > new Date().getTime(),
              }"
              v-for="(list, index) in item.jie_lists"
              :key="list.id"
            >
              <div class="leftTips" v-show="list.xxjd_info.status == 2"></div>
              <div
                class="leftTips"
                style="background-color: #08a579"
                v-show="
                  list.xxjd_info.status != 2 &&
                  list.start_time_true * 1000 < new Date().getTime()
                "
              ></div>
              <div
                class="leftTips"
                style="background-color: #ccc"
                v-show="list.start_time_true * 1000 > new Date().getTime()"
              ></div>
              <div class="muluIndex">
                <h3>0{{ index + 1 }}</h3>
              </div>
              <div class="mulumsg">
                <div class="listTitle">
                  {{ list.title }}
                </div>
                <div
                  class="mulubottom"
                  v-show="list.start_time_true * 1000 <= new Date().getTime()"
                >
                  <div class="timelong">
                    {{ formatSeconds(list.shichang) }}
                  </div>
                  <div class="studyjd">学习进度：{{ list.xxjd_info.jd }}%</div>
                </div>
                <div class="mulubottom">
                  <div
                    class="activetime"
                    v-show="list.start_time_true * 1000 > new Date().getTime()"
                  >
                    {{ timeStamp2String(list.start_time_true * 1000, 1) }}
                    {{ timeStamp2String(list.start_time_true * 1000, 5) }} 开播
                  </div>
                </div>
              </div>
              <div class="muluright">
                <div
                  class="yixuewan zhuangtai"
                  v-show="
                    list.xxjd_info.status == 2 &&
                    list.start_time_true * 1000 < new Date().getTime()
                  "
                  @click="syudyJie(list.id)"
                >
                  <img src="../../assets/img/acresyixuewan.png" alt="" />
                  <span>已完成</span>
                </div>
                <div
                  class="yixuewan zhuangtai"
                  v-show="zhangjie_id == list.id && list.xxjd_info.status != 2"
                >
                  <img src="../../assets/img/acresxuexizhong.png" alt="" />
                  <span>学习中</span>
                </div>
                <div
                  class="yixuewan zhuangtai"
                  v-show="
                    list.xxjd_info.status != 2 &&
                    list.start_time_true * 1000 < new Date().getTime() &&
                    zhangjie_id != list.id
                  "
                  @click="syudyJie(list.id)"
                >
                  <img src="../../assets/img/acresweixuexi.png" alt="" />
                  <span>未完成</span>
                </div>
                <div
                  class="yixuewan zhuangtai"
                  v-show="list.start_time_true * 1000 > new Date().getTime()"
                >
                  <img src="../../assets/img/acresweikaiqi.png" alt="" />
                  <span>未开始</span>
                </div>
              </div>
            </div>
            <div
              class="muluLists submitWork"
              v-show="mulutapValue == item.id && muluSubmitWork"
            >
              <div class="leftTips" style="background-color: #08a579"></div>
              <div class="muluIndex">
                <h3>0{{ item.jie_lists.length + 1 }}</h3>
              </div>
              <div class="mulumsg">
                <div class="listTitle">提交作业：{{ item.zy_title }}</div>
                <div class="mulubottom" v-if="item.zytj_status.tj_status == 0">
                  未提交
                </div>
                <div class="mulubottom" v-if="item.zytj_status.tj_status == 1">
                  已提交：<span @click="seezy(item.zytj_status.id)">{{
                    item.zytj_status.title
                  }}</span>
                </div>
              </div>
              <div class="zydosome">
                <div
                  class="tj anniu"
                  v-if="item.zytj_status.tj_status == 0"
                  @click="
                    showzytc(
                      item.id,
                      item.zy_title,
                      item.zy_contents,
                      item.zytj_status
                    )
                  "
                >
                  提交
                </div>
                <div
                  class="cxtj anniu"
                  v-if="item.zytj_status.tj_status == 1"
                  @click="
                    showzytc(
                      item.id,
                      item.zy_title,
                      item.zy_contents,
                      item.zytj_status
                    )
                  "
                >
                  重新提交
                </div>
              </div>
            </div>
          </div>
          <el-dialog :visible.sync="zytcshow" width="840px">
            <div class="submitzyBox">
              <h4>提交作业</h4>
              <h5>作业要求：</h5>
              <p>{{ zymsgTc }}</p>
              <h5>上传作业：</h5>
              <div class="caozuo">
                <div class="fujian">
                  <input
                    type="file"
                    ref="evfile"
                    style="display: none"
                    @change="zh_uploadFile_change"
                  />
                  <input type="text" :value="zyname" />
                  <span type="ghost" @click="zh_uploadFile">上传附件</span>
                </div>
                <div class="yulan" @click="seezy(zczyid)">在线预览</div>
              </div>
              <div class="submitsure" @click="sureTj">确认提交</div>
            </div>
          </el-dialog>
          <div class="zyyulan">
            <el-dialog :visible.sync="zyylshow" width="900px">
              <div class="picList">
                <div class="pic" v-for="item in zyylLists" :key="item.id">
                  <img :src="item.file_url" alt="" />
                </div>
              </div>
              <div class="nothing" v-if="zyylLists.length == 0">
                <img src="../../assets/img/nothing.png" alt="" />
              </div>
            </el-dialog>
          </div>
        </div>
        <!-- 往期心得 -->
        <div class="tab2" v-if="tapsRadio == 2">
          <div class="msg">
            <el-table
              :data="tableData"
              style="width: 740px"
              stripe
              fit
              v-if="tableData.length != 0"
            >
              <el-table-column
                label="编号"
                width="80px"
                align="center"
                type="index"
              >
              </el-table-column>
              <el-table-column
                label="心得"
                width="350px"
                align="center"
                prop="title"
              >
              </el-table-column>
              <el-table-column label="提交人" align="center" prop="author">
              </el-table-column>
              <el-table-column label="操作" width="90px" align="center">
                <template slot-scope="scope">
                  <div class="dosome" @click="handleClick(scope.row.id)">
                    预览
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog :visible.sync="dialogVisible" width="880px">
              <div class="picList">
                <div class="pic" v-for="item in yulanPics" :key="item.id">
                  <img :src="item.file_url" alt="" />
                </div>
              </div>
              <div class="nothing" v-if="yulanPics.length == 0">
                <img src="../../assets/img/nothing.png" alt="" />
              </div>
            </el-dialog>
          </div>
          <!-- 表格分页 -->
          <div class="page1" v-show="tableData.length != 0">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              background
              :page-sizes="[5]"
              :page-size="100"
              layout="total,  prev, pager, next"
              :total="retCounts"
            >
            </el-pagination>
          </div>
          <div class="nothing" v-if="xindeRes">
            <img src="../../assets/img/nothing.png" alt="" />
          </div>
        </div>
        <!-- 活动评价 -->
        <div class="tab3" v-if="tapsRadio == 3">
          <div class="nothing" v-show="!pingjiaRes">
            <img src="../../assets/img/nothing.png" alt="" />
          </div>
          <div class="title" v-show="picLists.length != 0">
            <span></span>
            <h3>活动评价</h3>
          </div>
          <div class="teachers" v-show="picLists.length != 0">
            <span
              class="leftN anniu"
              @click="picLeft"
              v-if="picLists.length > 3"
              ><i class="el-icon-arrow-left"></i
            ></span>
            <span
              class="rightN anniu"
              @click="picRight"
              v-if="picLists.length > 3"
              ><i class="el-icon-arrow-right"></i>
            </span>
            <div class="picDeatils">
              <ul class="picLists">
                <li v-for="(item, index) in picLists" :key="index">
                  <el-image
                    :src="item.file_url_resize"
                    :preview-src-list="yulanArrT"
                  >
                  </el-image>
                </li>
              </ul>
            </div>
          </div>
          <div class="title" v-show="fcPicList.length != 0">
            <span></span>
            <h3>活动风采</h3>
          </div>
          <div class="activeStyle" v-show="fcPicList.length != 0">
            <span
              class="leftN anniu"
              @click="styleLeft"
              v-if="fcPicList.length > 4"
              ><i class="el-icon-arrow-left"></i
            ></span>
            <span
              class="rightN anniu"
              @click="styleRight"
              v-if="fcPicList.length > 4"
              ><i class="el-icon-arrow-right"></i>
            </span>
            <div class="styleDeatils">
              <ul class="styleLists">
                <li v-for="(item, index) in fcPicList" :key="index">
                  <el-image
                    :src="item.file_url_resize"
                    :preview-src-list="yulanArrF"
                  >
                  </el-image>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 课件下载 -->
        <div class="tab4" v-if="tapsRadio == 4">
          <div class="box" v-for="item in kejianLists" :key="item.id">
            <img
              src="../../assets/img/resFile (1).png"
              alt="file_url"
              v-if="
                item.suffix == 'ppt' ||
                item.suffix == 'pptx' ||
                item.suffix == 'ppsx' ||
                item.suffix == 'pps'
              "
            />
            <img
              src="../../assets/img/resFile (2).png"
              alt="file_url"
              v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
            />
            <img
              src="../../assets/img/resFile (3).png"
              alt="file_url"
              v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
            />
            <img
              src="../../assets/img/resFile (4).png"
              alt="file_url"
              v-if="item.suffix == 'zip' || item.suffix == 'rar'"
            />
            <img
              src="../../assets/img/resFile (5).png"
              alt="file_url"
              v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
            />
            <img
              src="../../assets/img/resFile (6).png"
              alt="file_url"
              v-if="item.suffix == 'doc' || item.suffix == 'docx'"
            />
            <img
              src="../../assets/img/resFile (7).png"
              alt="file_url"
              v-if="item.suffix == 'pdf'"
            />
            <img
              src="../../assets/img/resFile (8).png"
              alt="file_url"
              v-if="item.suffix == 'png' || item.suffix == 'jpg'"
            />
            <p>{{ item.title }}</p>
            <span>
              <a @click="yulankejian(item.id)">预览</a>
              <a @click="downkejian(item.download_file_url, item.title)"
                >下载</a
              >
            </span>
          </div>
          <div class="nothing dqkf" v-if="kejianNothingShow">
            <p>添加客服微信，<span>领取资料</span></p>
            <div class="pic">
              <img :src="dqkfevm"  />
            </div>
          </div>
          <!-- 课件分页 -->
          <div class="page1" v-if="kejianLists.length != 0">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange2"
              :current-page="currentPage"
              background
              :page-sizes="[5]"
              :page-size="100"
              layout="total,  prev, pager, next"
              :total="retCounts2"
            >
            </el-pagination>
          </div>
          <el-dialog :visible.sync="dialogVisible2" width="880px">
            <div class="picList" v-if="kjyulanPic.length > 0">
              <div class="pic" v-for="item in kjyulanPic" :key="item.id">
                <img :src="item.file_url" alt="" />
              </div>
            </div>
            <div class="nothing" v-if="nothingShow">
              <img src="../../assets/img/nothing.png" alt="" />
            </div>
          </el-dialog>
        </div>
        <!-- 提交作业 -->
        <div class="tab5" v-if="tapsRadio == 5">
          <h4>作业要求：</h4>
          <p v-html="zy_contents"></p>
          <h4 style="margintop: 30px">作业状态：</h4>
          <p v-show="zytj_status.tj_status == 1">已提交</p>
          <p v-show="zytj_status.tj_status == 0">未提交</p>
          <div class="submitZy">
            <div type="ghost" icon="ios-cloud-upload-outline" @click="showzytc">
              {{ workSubmit }}
            </div>
            <!-- <input type="file" ref="evfile" style="display:none" @change="zh_uploadFile_change" /> -->
          </div>
          <el-dialog :visible.sync="zytcshow" width="840px">
            <div class="submitzyBox">
              <h4>提交作业</h4>
              <h5>作业要求：</h5>
              <p v-html="zy_contents"></p>
              <h5>上传作业：</h5>
              <div class="caozuo">
                <div class="fujian">
                  <input
                    type="file"
                    ref="evfile"
                    style="display: none"
                    @change="zh_uploadFile_change"
                  />
                  <input type="text" :value="zyname" />
                  <span type="ghost" @click="zh_uploadFile">上传附件</span>
                </div>
                <div class="yulan" @click="seezy(zczyid)">在线预览</div>
              </div>
              <div class="submitsure" @click="sureTj">确认提交</div>
            </div>
          </el-dialog>
          <div class="zyyulan">
            <el-dialog :visible.sync="zyylshow" width="900px">
              <div class="picList">
                <div class="pic" v-for="item in zyylLists" :key="item.id">
                  <img :src="item.file_url" alt="" />
                </div>
              </div>
              <div class="nothing" v-if="zyylLists.length == 0">
                <img src="../../assets/img/nothing.png" alt="" />
              </div>
            </el-dialog>
          </div>
        </div>
        <!-- 问卷调查 -->
        <div class="tab6" v-if="tapsRadio == 6">
          <iframe
            :src="wj_http_url"
            width="799"
            height="800"
            frameborder="0"
            style="overflow: auto"
          ></iframe>
        </div>
      </div>
      <div class="right" v-if="proShow">
        <div class="title2">
          <span></span>
          <h3>相关推荐</h3>
        </div>
        <div class="box">
          <div class="pic">
            <img :src="product_info.file_url" alt="" />
          </div>
          <h3>{{ product_info.title }}</h3>
          <p>{{ product_info.synopsis }}</p>
          <span @click="goProDetails">查看样书</span>
        </div>
      </div>
      <!-- 查看活动报告 -->
      <div class="acbaogao">
        <el-dialog :visible.sync="baogaoshow" width="880px">
          <div class="picList">
            <div class="pic" v-for="item in yulanPics" :key="item.id">
              <img :src="item.file_url" alt="" />
            </div>
            <!-- <div class="nothing" v-if="yulanPics.length == 0">
              <img src="../../assets/img/nothing.png" alt="" />
            </div> -->
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 个人信息不完善无法报名时的完善个人信息弹窗 -->
    <div class="userinfoBox">
      <el-dialog
        title=""
        :visible.sync="dialogTableVisible"
        :close-on-click-modal="true"
        :close-on-press-escape="true"
        :show-close="true"
        center
        width="650px"
      >
        <div class="chose">
          <h3>完善个人信息</h3>
          <el-form label-width="100px">
            <el-form-item label="昵称">
              <input
                v-model="ninckname"
                placeholder="请填写昵称"
                spellcheck="false"
              />
            </el-form-item>
            <el-form-item label="真实姓名">
              <input v-model="username" placeholder="请填写真实姓名" />
            </el-form-item>
            <el-form-item label="所在省市区">
              <div class="adreess" ref="box">
                <!-- @click="choseSSQ = !choseSSQ" 地区暂时不让更改，取消点击出现选择地区栏 -->
                <div class="indput">
                  <input
                    type="text"
                    @click="choseSSQ = !choseSSQ"
                    :value="adreess"
                  />
                  <i class="el-icon-arrow-down jiantou" v-if="!choseSSQ"></i>
                  <i class="el-icon-arrow-up jiantou" v-if="choseSSQ"></i>
                </div>
                <div class="adreessBox" v-show="choseSSQ">
                  <div class="preBox box">
                    <div
                      class="list"
                      v-for="item in provincecodeList"
                      :key="item.code"
                      @click="chosePre(item.code, item.name)"
                      :class="{ select_color: provincecode == item.code }"
                    >
                      <span>{{ item.name }}</span>
                      <i class="el-icon-arrow-right"></i>
                    </div>
                  </div>
                  <div class="cityBox box" v-if="cityList.length > 0">
                    <div
                      class="list"
                      v-for="item in cityList"
                      :key="item.code"
                      @click="choseCity(item.code, item.name)"
                      :class="{ select_color: citycode == item.code }"
                    >
                      <span>{{ item.name }}</span>
                      <i class="el-icon-arrow-right"></i>
                    </div>
                  </div>
                  <div class="areaBox box" v-if="areaList.length > 0">
                    <div
                      class="list"
                      v-for="item in areaList"
                      :key="item.code"
                      @click="choseArea(item.code, item.name)"
                      :class="{ select_color: areacode == item.code }"
                    >
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="所在学校">
              <el-select
                v-model="school"
                filterable
                allow-create
                placeholder="请选择"
                @change="changeSchool"
              >
                <el-option
                  v-for="item in schoolList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <!-- <div class="indput">
            <input type="text" disabled :value="school" />
          </div> -->
            </el-form-item>
            <el-form-item label="岗位职务">
              <el-select
                v-model="zhiwu_id"
                placeholder="请选择"
                @change="changeZhiwu"
              >
                <el-option
                  v-for="item in zhiwuList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否为班主任">
              <el-select
                v-model="isadviser"
                placeholder="请选择"
                @change="changeadviser"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所在年级">
              <el-select
                v-model="radio3"
                placeholder="请选择"
                @change="changeGrade"
              >
                <el-option
                  v-for="item in nianjiList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="submitSet" @click="submituserinfo">
            <span>提交</span>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import LivePlayer from "@liveqing/liveplayer"; // vue2
import { timeStamp2String } from "../../utils/time";
import {
  userinfo,
  info_activity,
  list_activityhdxd,
  info_activityhdxd,
  list_activityimg02,
  list_activitykejian,
  info_activitykejian,
  bm_activity,
  qiniuconfig,
  tjzy_activity,
  chatinfo,
  page_times,
  sysinfo,
  recommendbook,
  info_activityzy,
  settj_activityzy,
  info_activityjie,
  loc_kefuewm,
  info_activitybg,
  playtimes_activity,
  kemulists,
  nianjilists,
  setuserinfo,
  pca,
  school,
  list_systypes,
} from "../../api/http";
import * as qiniu from "qiniu-js";
export default {
  components: {
    LivePlayer,
  },
  inject: ["reload"],
  data() {
    return {
      timeStamp2String,
      active_id: 0, //活动id
      title: "", //顶部活动名称
      file_url: "", //视频封面图
      gzh_file_url: "", //公众号二维码
      ewm_file_url: "", //手机扫描二维码
      syfw_info: "", //适用范围
      start_time: "", //活动开始时间
      end_time: "", //活动结束时间
      zb_status: "", //直播状态
      zb_file_url: "", //直播拉流地址
      video_file_url: "", //回放视频地址
      contents: "", //活动介绍
      zy_contents: "", //提交作业说明
      wj_contents: "", //填写问卷说明
      bm_status: 0, //是否报名
      lh_status: "", //是否被拉黑
      xindeRes: false, //心得内容是否存在，没有内容显示空图
      pingjiaRes: false, //评价内容如果不存在，显示空图
      playFlag: true, //播放按钮的显示隐藏
      // 视频封面图
      file_url: "",
      seek: "", //视频进度

      //报名相关
      signSuccess: false, //报名弹窗显示隐藏
      kfevm: "", //报名弹窗客服二维码

      //左下tap部分
      gongnengLists: [], //后台选择的功能书组
      activitymenu_lists: [], //初始化的左下tap栏标签列表

      //表格数据
      retCounts: 0, //表格列表心得总数
      tableData: [], //心得表格数据
      yulanPics: [], //心得表格预览图列表
      //图片轮播列表
      picLists: [], //活动评价图列表
      fcPicList: [], //活动风采图列表
      yulanArrT: [], //预览活动评价图组
      yulanArrF: [], //预览活动风采图组
      picMoveWidth: 0, //第一种图片位移距离
      stykeMoveWidth: 0, //第二种图片位移距离
      dialogVisible: false, //预览的显示隐藏
      // 资料下载课件列表
      kejianLists: [], //课件列表
      kjyulanPic: [], //课件预览图列表
      retCounts2: 0, //课件总数
      kejianNothingShow: "", //课件数据是否为空
      dialogVisible2: false, //课件预览的显示隐藏
      nothingShow: false,
      currentPage: 1, //分页默认选中页
      wenjuanFlag: false, //调查问卷的显示隐藏
      //作业提交
      kj_download_file_url: "", //上传到七牛云返回的地址
      workSubmit: "提交作业", //作业提交按钮
      //问卷调查的默认选项
      radio1: 2,
      radio2: 2,
      radio3: 2,
      radio4: 2,
      textarea: "",

      //滚动页面
      scrollTop: 81,

      //是否显示拉黑能看的视频内容
      isLh: false,

      //右侧产品推荐
      product_info: {},
      proShow: false, //产品的展示隐藏

      canMove: true,

      //4.2版本迭代
      tapsRadio: 1, //tap栏的切换值
      baogaoshow: false, //活动报告展示
      baogaoLists: [], //活动报告图片列表
      type_id: "", //系列活动2，普通活动1
      zhang_lists: [], //章节目录
      actcyytxShow: true, //活动预约课程学习提醒弹窗
      mulutapValue: "", //当前展开的是第几单元
      danyuanid: "", //选中提交作业的单元id
      zytcshow: false, //提交作业弹窗展示
      zytitleTc: "", //作业弹窗标题
      zymsgTc: "", //作业弹窗要求
      zyname: "", //作业名
      zczyid: "", //暂存作业id
      zyylshow: false, //作业预览弹窗
      zyylLists: [], //作业预览图表

      zytj_status: {}, //普通活动的作业提交详情
      xilieyuyueshow: false, //系列活动预约弹窗
      dqkfevm: "", //地区客服二维码
      hb_file_url: "", //预约提醒弹窗海报

      zhangjie_id: "", //系列活动下选中的章节id
      jieSeekTime: null, //上报活动时间定时器
      xiliezhezhao: true, //系列活动未点击播放时的遮罩

      wj_http_url: "", //问卷调查嵌入地址

      muluSubmitWork: false, //系列化活动目录是否有提交作业

      //完善个人信息内容
      dialogTableVisible: false,
      nianjiList: [], //可选年级列表
      classList: [], //学科列表
      radio3: "", //年级值
      radio1: "", //学科值
      ninckname: "", //昵称
      username: "", //真实姓名
      // adreess: (this.province = ""
      //   ? "请选择所在的省市区"
      //   : this.province + "/" + this.city + "/" + this.area), //所在省市区
      adreess: "",
      school: "", //所在学校
      school_id: "", //学校id
      schoolList: [], //可选学校列表
      provincecodeList: [], //省列表
      cityList: [], //市列表
      areaList: [], //区列表
      provincecode: "", //省id
      citycode: "", //市id
      areacode: "", //区id
      province: "", //省名称
      city: "", //市名称
      area: "", //区名称
      choseSSQ: false, //省市区选择框的显示隐藏
      zhiwuList: [], //职务列表
      isadviser: "0", //是否为班主任
      zhiwu_id: "", //岗位职务id
      oldzhiwu_id: "", //修改前职务id
      account: "", //账号

      //是否是搜索页跳转来的
      isSearch: false,
      routeurl: "", //路径
    };
  },
  created() {

    //回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });
    this.$router.push({
      name:'FullScreen',
      query:{
        id: this.$route.query.id,
        type:'hd',
        from:this.$route.query.from,
      }
    })
    //query参数
    console.log(this.$route.query, "query");
    //是否是搜索页 或首页跳转来的
    if (this.$route.query.isSearch || this.$route.query.isIndex) {
      this.routeurl = this.$route.query.path;
      this.isSearch = 1;
    }
    //获取从活动详情传来的视频进度
    if (this.$route.query.seek) {
      this.seek = this.$route.query.seek;
    }
    this.active_id = this.$route.query.id;

    //判断过期
    // userinfo({
    //   md5key: localStorage.getItem("md5key"),
    // }).then((res) => {
    //   if (res.retInt == 1) {

    //   }
    //   if (res.retRes.sy_end_time * 1000 < Date.parse(new Date())) {
    //     this.$router.push({
    //       name: "Login",
    //       query: {
    //         isgq: 1,
    //       },
    //     });
    //   }
    // });

    this.getactiveRes(); //活动详情
    //判断活动报告是否显示
    info_activitybg({
      md5key: localStorage.getItem("md5key"),
      id: this.active_id,
    }).then((res) => {
      console.log(res.retRes, "活动报告详情");
      this.baogaoLists = res.retRes.file_lists;
    });
    //地区客服二维码
    loc_kefuewm({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res, "地区客服二维码");
      this.dqkfevm = res.retRes.kefu_file_url;
    });
    //获取职务分类列表
    list_systypes({
      md5key: localStorage.getItem("md5key"),
      type_str: "zhiwu",
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "职务列表");
        this.zhiwuList = res.retRes;
      }
    });
    //获取学校列表
    school({
      provincecode: this.provincecode,
      citycode: this.citycode,
      areacode: this.areacode,
    }).then((res) => {
      this.schoolList = [];
      console.log(res, "学校列表");
      if (res.retInt == 1) {
        const data = res.retRes;
        this.schoolList = data;
      }
    });
    //获取省市区数据
    pca({
      type: "p",
    }).then((res) => {
      console.log(res, "省份数据 ");
      this.provincecodeList = res.retRes;
    });
    //获取年级列表数据
    nianjilists({ md5key: localStorage.getItem("md5key") }).then((res) => {
      console.log(res, "年级列表");
      const data = res.retRes;
      if (res.retInt == 1) {
        this.nianjiList = data;
      }
    });
    //获取科目列表
    kemulists({ md5key: localStorage.getItem("md5key") }).then((res) => {
      console.log(res, "科目列表");
      const data = res.retRes;
      if (res.retInt == 1) {
        this.classList = data;
      }
    });
    //获取聊天室详情
    chatinfo({
      md5key: localStorage.getItem("md5key"),
      activity_id: this.active_id,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "聊天室详情");
        this.lh_status = res.retRes.lh_status;
        //进入直播间判断是否被拉黑
        if (this.lh_status == 1) {
          this.isLh = true;
        } else if (this.lh_status == 0) {
          this.isLh = false;
        }
      }
    });
    //获取活动详情页面推荐图书
    recommendbook({
      md5key: localStorage.getItem("md5key"),
      id: this.active_id,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "推荐图书详情");
      }
    });
  },
  mounted() {
    //获取系统信息里的上报时长
    sysinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res, "系统信息");
      const times = res.retRes.page_times;
      //上报停留时长
      setInterval(() => {
        page_times({
          table_name: "activity",
          row_id: this.active_id,
          times: times,
        }).then((res) => {});
      }, times * 1000);
    });

    // this.jieSeekTime = setInterval(() => {
    //       playtimes_activity({
    //         md5key: localStorage.getItem("md5key"),
    //         id: this.zhangjie_id,
    //         times: this.$refs.livePlayer.getCurrentTime(),
    //       });
    //     }, 1000);
    //自动播放

    // setTimeout(() => {
    //   console.log(123 )
    //   console.log(this.zb_file_url,this.video_file_url )
    //   // if (this.zb_file_url || this.video_file_url) {
    //   //   this.jieSeekTime = setInterval(() => {
    //   //     playtimes_activity({
    //   //       md5key: localStorage.getItem("md5key"),
    //   //       id: this.zhangjie_id,
    //   //       times: this.$refs.livePlayer.getCurrentTime(),
    //   //     });
    //   //   }, 1000);
    //   // }

    //   // this.click1();
    //   // this.$refs.livePlayer.setCurrentTime(this.seek);
    //   // console.log(this.$refs.livePlayer.getCurrentTime(), "1231231231");

    //   // console.log(this.$refs.livePlayer.$el.children[0].children[0].children[0].children[0])
    // }, 200);
    //监听滚动
    window.addEventListener("scroll", this.handleScrollY, true);
  },
  updated() {},

  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScrollY, true);
    // localStorage.setItem('seek',this.$refs.livePlayer.getCurrentTime())
    playtimes_activity({
      md5key: localStorage.getItem("md5key"),
      id: this.zhangjie_id,
      times: this.$refs.livePlayer.getCurrentTime(),
    });
    clearInterval(this.jieSeekTime);
    this.jieSeekTime = null;
  },
  directives: {
    // drag: function (el) {
    //   let dragBox = el; //获取当前元素
    //   dragBox.onmousedown = (e) => {
    //     //算出鼠标相对元素的位置
    //     let disX = e.clientX - dragBox.offsetLeft;
    //     let disY = e.clientY - dragBox.offsetTop;
    //     document.onmousemove = (e) => {
    //       //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
    //       let left = e.clientX - disX;
    //       let top = e.clientY - disY;
    //       //移动当前元素
    //       if (el.clientHeight < 360) {
    //         dragBox.style.left = left + "px";
    //         dragBox.style.top = top + "px";
    //       }
    //     };
    //     document.onmouseup = (e) => {
    //       //鼠标弹起来的时候不再移动
    //       document.onmousemove = null;
    //       //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
    //       document.onmouseup = null;
    //     };
    //   };
    //   window.addEventListener("scroll", () => {
    //     if (el.getBoundingClientRect().bottom < 80) {
    //       dragBox.style.position = "relative";
    //       // console.log("xiao")
    //       // // dragBox.style.left = "0px";
    //       // dragBox.style.inset = "0px 0px 0px 0px !important"
    //       // // dragBox.style.top = "0px";
    //       // dragBox.style.width = "640px";
    //       // dragBox.style.height = "360px";
    //     }
    //   });
    // },
  },

  methods: {
    //时间换算
    formatSeconds(value) {
      var secondTime = parseInt(value); // 秒
      var minuteTime = 0; // 分
      var hourTime = 0; // 小时
      if (secondTime > 60) {
        //如果秒数大于60，将秒数转换成整数
        //获取分钟，除以60取整数，得到整数分钟
        minuteTime = parseInt(secondTime / 60);
        //获取秒数，秒数取余，得到整数秒数
        secondTime = parseInt(secondTime % 60);
        //如果分钟大于60，将分钟转换成小时
        if (minuteTime > 60) {
          //获取小时，获取分钟除以60，得到整数小时
          hourTime = parseInt(minuteTime / 60);
          //获取小时后取余的分，获取分钟除以60取余的分
          minuteTime = parseInt(minuteTime % 60);
        }
      }
      var result = "" + parseInt(secondTime) + "s";

      if (minuteTime > 0) {
        result = "" + parseInt(minuteTime) + "m" + result;
      }
      if (hourTime > 0) {
        result = "" + parseInt(hourTime) + "h" + result;
      }
      // console.log('result',result);
      return result;
    },
    //获取活动详情
    getactiveRes() {
      info_activity({
        md5key: localStorage.getItem("md5key"),
        id: this.active_id,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "活动详情");
          const data = res.retRes;
          this.active_id = data.id;
          this.title = data.title;
          this.file_url = data.file_url;
          this.gzh_file_url = data.gzh_file_url;
          this.ewm_file_url = data.ewm_file_url;
          this.hb_file_url = data.hb_file_url;
          this.start_time = data.start_time;
          this.end_time = data.end_time;
          this.zb_status = data.zb_status;
          this.wj_http_url = data.wj_http_url;
          this.contents = data.contents;
          this.zy_contents = data.zy_contents;
          this.wj_contents = data.wj_contents;
          this.bm_status = data.bm_status;
          this.product_info = data.product_info;
          this.type_id = data.type_id;
          this.zhang_lists = data.zhang_lists;
          this.zytj_status = data.zytj_status; //普通活动的作业提交详情
          if (data.zytj_status.tj_status == 1) {
            this.workSubmit = "重新提交";
          } else {
            this.workSubmit = "提交作业";
          }

          //区分系列活动和普通活动的播放
          if (data.type_id == 2) {
            this.mulutapValue = data.zhang_lists[0].id;
            this.zhangjie_id = data.mrjie_id;
            this.zhang_lists.forEach((item) => {
              item.jie_lists.forEach((list) => {
                if (list.id == this.zhangjie_id) {
                  this.seek = list.xxjd_info.times;
                }
              });
            });
          } else if (data.type_id == 1) {
            this.zb_file_url = data.zb_file_url;
            this.video_file_url = data.video_file_url;
            if (this.video_file_url) {
              //上传录播播放时长
              this.jieSeekTime = setInterval(() => {
                playtimes_activity({
                  md5key: localStorage.getItem("md5key"),
                  id: this.zhangjie_id,
                  times: this.$refs.livePlayer.getCurrentTime(),
                });
              }, 60000);
            }
          }

          if (data.productbook_id && data.productbook_id != 0) {
            this.proShow = true;
          } else {
            this.proShow = false;
          }
          this.syfw_info = data.syfw_info;
          this.activitymenu_lists = data.activitymenu_lists;
          //去除掉菜单栏里的小程序端才用到的功能
          const menuLists = [];
          for (let i = 0; i < this.activitymenu_lists.length; i++) {
            menuLists.push(this.activitymenu_lists[i].id);
          }
          // console.log(menuLists);
          if (menuLists.indexOf(7) != -1) {
            this.activitymenu_lists.splice(menuLists.indexOf(7), 1);
          }
          //系列化活动加上活动目录
          if (this.type_id == 2) {
            let mulu = { id: 9, title: "活动目录" };
            this.activitymenu_lists.splice(1, 0, mulu);
          }
          //系列化活动并且有提交作业的，加上提交作业
          if (this.type_id == 2 && menuLists.indexOf(5) != -1) {
            for (let i = 0; i < this.activitymenu_lists.length; i++) {
              if (this.activitymenu_lists[i].id == 5) {
                this.activitymenu_lists.splice(i, 1);
              }
            }
            this.muluSubmitWork = true;
          } else if (this.type_id == 2 && menuLists.indexOf(5) == -1) {
            this.muluSubmitWork = false;
          }
          // console.log(this.activitymenu_lists, "wahahahah");

          console.log(this.zb_file_url, this.video_file_url, "hahaha");
        }
      });
    },
    //选中活动目录章
    choseDy(id, obj) {
      console.log(this.$refs.livePlayer.getDuration(), "1231231231");
      if (this.mulutapValue == id) {
        this.mulutapValue = "";
      } else {
        this.mulutapValue = id;
      }
    },
    //点击学习章节活动
    syudyJie(id) {
      clearInterval(this.jieSeekTime);
      this.jieSeekTime = null;
      this.zhangjie_id = id;
      if (this.bm_status == 0) {
        this.xilieyuyueshow = true;
      } else {
        info_activityjie({
          md5key: localStorage.getItem("md5key"),
          id: id,
        }).then((res) => {
          console.log(res);
          this.zb_status = res.retRes.zb_status;
          this.zb_file_url = res.retRes.zb_file_url;
          this.video_file_url = res.retRes.video_file_url;
          this.seek = res.retRes.times;
          if (res.retRes.video_file_url) {
            this.xiliezhezhao = false;
            const that = this;
            setTimeout(() => {
              this.$refs.livePlayer.setCurrentTime(this.seek);
              // console.log(this.$refs.livePlayer.timeupdate(),"测试视频视频视频")
            }, 200);
            this.jieSeekTime = setInterval(() => {
              playtimes_activity({
                md5key: localStorage.getItem("md5key"),
                id: this.zhangjie_id,
                times: that.$refs.livePlayer.getCurrentTime(),
              });
            }, 60000);
          } else {
            this.xiliezhezhao = true;
          }
        });
      }
    },
    haha(a, b) {
      // console.log(a,b)
      // console.log(this.$refs.livePlayer.getDuration())
      // console.log(this.$refs.livePlayer.getDuration(), "1231231231");
    },
    heihei(a) {
      console.log(a);
      // console.log(this.$refs.livePlayer.getDuration())
    },
    //查看活动报告
    seeacbaogao() {
      if (this.bm_status == 0) {
        this.xilieyuyueshow = true;
      } else {
        info_activitybg({
          md5key: localStorage.getItem("md5key"),
          id: this.active_id,
        }).then((res) => {
          console.log(res, "活动报告详情");
          if (res.retRes.length == 0) {
            this.$message({
              message: "活动报告暂未生成",
              type: "warning",
              duration: 1000,
              offset: 200,
            });
          } else {
            this.baogaoLists = res.retRes.file_lists;
            this.baogaoshow = true;
          }
        });
      }
    },
    //查看作业详情
    seezy(id) {
      info_activityzy({
        md5key: localStorage.getItem("md5key"),
        id: id,
      }).then((res) => {
        console.log(res);
        this.zyylLists = res.retRes.file_lists;
        this.zyylshow = true;
      });
    },
    //打开提交作业弹窗
    showzytc(id, title, msg, obj) {
      if (this.type_id == 2) {
        if (this.bm_status == 1) {
          this.danyuanid = id;
          console.log(title, msg, obj);
          this.zytitleTc = title;
          this.zymsgTc = msg;
          this.zytcshow = true;
        } else {
          this.xilieyuyueshow = true;
        }
      } else {
        if (this.bm_status == 1) {
          this.zytcshow = true;
        } else {
          this.$message({
            message: "报名后才可以提交作业！",
            type: "warning",
            duration: 1000,
            offset: 300,
          });
        }
      }
    },
    //视频禁止右键
    menuPlayer() {
      console.log();
    },
    //测试
    handleScrollY() {
      const videoBox = document.getElementsByClassName("videoBox")[0];
      const activeTop = document.getElementsByClassName("activeTop")[0];
      this.scrollTop = activeTop.getBoundingClientRect().bottom;

      // if (
      //   activeTop.getBoundingClientRect().bottom < 80 &&
      //   this.isLh == false &&
      //   this.bm_status == 1
      // ) {
      //   videoBox.style.position = "fixed";
      //   videoBox.style.bottom = "100px";
      //   videoBox.style.right = "50px";
      //   videoBox.style.width = "400px";
      //   videoBox.style.height = "225px";
      //   videoBox.style.cursor = "move";
      // } else if (
      //   activeTop.getBoundingClientRect().bottom < 80 &&
      //   this.video_file_url != "" &&
      //   this.bm_status == 0
      // ) {
      //   videoBox.style.position = "fixed";
      //   videoBox.style.bottom = "100px";
      //   videoBox.style.right = "50px";
      //   videoBox.style.width = "400px";
      //   videoBox.style.height = "225px";
      //   videoBox.style.cursor = "move";
      // } else if (activeTop.getBoundingClientRect().bottom >= 80) {
      //   videoBox.style.position = "relative";
      //   videoBox.style.right = "0px";
      //   videoBox.style.width = "640px";
      //   videoBox.style.height = "360px";
      //   videoBox.style.bottom = "0px";
      // }
      // hua.requestPictureInPicture()
      // document.exitPictureInPicture();
    },
    // ceshi(){
    //   const hua = this.$refs.livePlayer.$el.children[0].children[0].children[0].children[0]
    //   hua.requestPictureInPicture()
    // },
    click1() {
      // this.$refs.livePlayer.pause ();
      // this.$refs.LivePlayer.toggleFullscreen()

      this.$refs.livePlayer.setMuted(false);
      this.$refs.livePlayer.setVolume(0.1);
      console.log(this.$refs.livePlayer.getCurrentTime(), "1231231231");
      console.log("进入页面点击");
      this.jieSeekTime = setInterval(() => {
        playtimes_activity({
          md5key: localStorage.getItem("md5key"),
          id: this.zhangjie_id,
          times: that.$refs.livePlayer.getCurrentTime(),
        });
      }, 60000);
    },
    //切换左下tap栏
    choseTaps(id) {
      this.page = 1;
      this.tapsRadio = id;
      if (id == 1) {
        console.log("活动介绍");
      } else if (id == 2) {
        list_activityhdxd({
          md5key: localStorage.getItem("md5key"),
          activity_id: this.active_id,
          page: 1,
          page_size: 5,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "活动心得列表");
            this.tableData = res.retRes;
            this.retCounts = res.retCounts;
            if (res.retRes.length == 0) {
              this.xindeRes = true;
            } else {
              this.xindeRes = false;
            }
            console.log(res.retRes.length);
          }
        });
      } else if (id == 3) {
        //获取活动评价图片列表
        list_activityimg02({
          md5key: localStorage.getItem("md5key"),
          activity_id: this.active_id,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "活动评价");
            this.picLists = res.retRes;
            this.yulanArrT = [];
            this.picLists.forEach((item) => {
              this.yulanArrT.push(item.file_url);
            });
            if (res.retRes.length == 0) {
              this.pingjiaRes = false;
            } else {
              this.pingjiaRes = true;
            }
          }
        });
      } else if (id == 4) {
        list_activitykejian({
          md5key: localStorage.getItem("md5key"),
          activity_id: this.active_id,
          page: 1,
          page_size: 5,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "课件下载列表");
            this.kejianLists = res.retRes;
            this.retCounts2 = res.retCounts;
            if (res.retRes.length == 0) {
              this.kejianNothingShow = true;
            } else {
              this.kejianNothingShow = false;
            }
          }
        });
      }
    },
    //预览课件
    yulankejian(id) {
      if (this.type_id == 1) {
        if (this.lh_status == 0 && this.bm_status == 1) {
          console.log(id);
          this.dialogVisible2 = true;
          info_activitykejian({
            md5key: localStorage.getItem("md5key"),
            id: id,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "课件预览详情");
              this.kjyulanPic = res.retRes.file_lists;
              if (res.retRes.file_lists.length < 1) {
                this.nothingShow = true;
              } else {
                this.nothingShow = false;
              }
            }
          });
        } else if (this.bm_status == 0) {
          this.$message({
            message: "报名后才可以下载相关内容！",
            type: "warning",
            duration: 1000,
            offset: 300,
          });
        } else if (this.lh_status == 1) {
          this.$message({
            message: "您已被拉黑，无法执行此操作",
            type: "warning",
            duration: 1000,
            offset: 300,
          });
        }
        // else if (this.bm_status == 0 && this.zb_status == 3) {
        //   console.log(id);
        //   this.dialogVisible2 = true;
        //   info_activitykejian({
        //     md5key: localStorage.getItem("md5key"),
        //     id: id,
        //   }).then((res) => {
        //     if (res.retInt == 1) {
        //       console.log(res, "课件预览详情");
        //       this.kjyulanPic = res.retRes.file_lists;
        //       if (res.retRes.file_lists.length < 1) {
        //         this.nothingShow = true;
        //       } else {
        //         this.nothingShow = false;
        //       }
        //     }
        //   });
        // }
      } else if (this.type_id == 2) {
        if (this.bm_status == 0) {
          this.xilieyuyueshow = true;
        } else {
          info_activitykejian({
            md5key: localStorage.getItem("md5key"),
            id: id,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "课件预览详情");
              this.kjyulanPic = res.retRes.file_lists;
              if (res.retRes.file_lists.length < 1) {
                this.nothingShow = true;
              } else {
                this.nothingShow = false;
              }
            }
          });
        }
      }
    },
    //下载课件
    downkejian(file_url, title) {
      if (this.type_id == 1) {
        if (this.lh_status == 0 && this.bm_status == 1) {
          let url = file_url;
          const a = document.createElement("a");
          a.href = url;
          a.download = title;
          a.style.display = "none";
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        } else if (this.bm_status == 0) {
          this.$message({
            message: "报名后才可以下载相关内容！",
            type: "warning",
            duration: 1000,
            offset: 300,
          });
        } else if (this.lh_status == 1) {
          this.$message({
            message: "您已被拉黑，无法执行此操作",
            type: "warning",
            duration: 1000,
            offset: 300,
          });
        }
        // else if (this.zb_status == 3) {
        //   let url = file_url;
        //   const a = document.createElement("a");
        //   a.href = url;
        //   a.download = title;
        //   a.style.display = "none";
        //   document.body.appendChild(a);
        //   a.click();
        //   document.body.removeChild(a);
        // }
      } else {
        if (this.bm_status == 0) {
          this.xilieyuyueshow = true;
        } else {
          let url = file_url;
          const a = document.createElement("a");
          a.href = url;
          a.download = title;
          a.style.display = "none";
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      }
    },
    //展示预览
    handleClick(id) {
      if (this.type_id == 1) {
        if (this.lh_status == 0 && this.bm_status == 1) {
          this.dialogVisible = true;
          console.log(id); //哪一个心得
          info_activityhdxd({
            md5key: localStorage.getItem("md5key"),
            id: id,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "活动心得预览");
              this.yulanPics = res.retRes.file_lists;
            } else {
              console.log(res.retErr);
            }
          });
        }
        // else if (this.zb_status == 3) {
        //   this.dialogVisible = true;
        //   console.log(id); //哪一个心得
        //   info_activityhdxd({
        //     md5key: localStorage.getItem("md5key"),
        //     id: id,
        //   }).then((res) => {
        //     if (res.retInt == 1) {
        //       console.log(res, "活动心得预览");
        //       this.yulanPics = res.retRes.file_lists;
        //     } else {
        //       console.log(res.retErr);
        //     }
        //   });
        // }
        else if (this.bm_status == 0) {
          this.$message({
            message: "报名后才可以预览心得哦！",
            type: "warning",
            duration: 1000,
            offset: 300,
          });
        } else if (this.lh_status == 1) {
          this.$message({
            message: "您已被拉黑，无法执行此操作",
            type: "warning",
            duration: 1000,
            offset: 300,
          });
        }
      } else if (this.type_id == 2) {
        if (this.bm_status == 0) {
          this.xilieyuyueshow = true;
        } else {
          this.dialogVisible = true;
          console.log(id); //哪一个心得
          info_activityhdxd({
            md5key: localStorage.getItem("md5key"),
            id: id,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "活动心得预览");
              this.yulanPics = res.retRes.file_lists;
            } else {
              console.log(res.retErr);
            }
          });
        }
      }
    },
    //报名
    baoming() {
      if (this.lh_status == 0) {
        //获取用户信息用于报名
        userinfo({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res);
            const data = res.retRes;
            this.ninckname = data.title;
            this.username = data.true_name;
            this.isadviser = JSON.stringify(data.is_bzr);
            this.radio3 = data.nianji_id;
            this.radio1 = data.kemu_id;
            this.zhiwu_id = data.zhiwu_id;
            this.oldzhiwu_id = data.zhiwu_id;
            this.account = data.account;
            if (data.jbxx_set == 0) {
              this.dialogTableVisible = true;
            } else {
              bm_activity({
                md5key: localStorage.getItem("md5key"),
                activity_id: this.active_id,
                school_id: data.school_id,
                kemu_id: data.kemu_id,
                nianji_id: data.nianji_id,
                zhiwu_id: data.zhiwu_id,
                is_bzr: this.isadviser,
                title: this.ninckname,
                true_name: this.username,
                account: data.account,
                provincecode: data.provincecode,
                citycode: data.citycode,
                areacode: data.areacode,
              }).then((res) => {
                if (res.retInt == 1 && res.retRes.is_gjjs == 1) {
                  console.log(res, "报名成功");
                  this.kfevm = res.retRes.ywy_file_url;
                  this.signSuccess = true;
                } else if (res.retInt == 1 && res.retRes.is_gjjs != 1) {
                  this.reload();
                } else if (res.retInt != 1) {
                  this.$message({
                    message: "报名失败",
                    type: "warning",
                    duration: 1000,
                    offset: 300,
                  });
                }
              });
            }
          }
        });
      } else {
        this.$message({
          message: "您已被拉黑，无法执行此操作",
          type: "warning",
          duration: 1000,
          offset: 300,
        });
      }
    },
    //选择省
    chosePre(code, name) {
      console.log(code);
      this.provincecode = code;
      this.province = name + "/";
      this.citycode = "";
      this.city = "";
      this.areacode = "";
      this.area = "";
      this.areaList = [];
      pca({
        type: "c",
        pcode: this.provincecode,
      }).then((res) => {
        console.log(res, "城市数据 ");
        this.cityList = res.retRes;
      });
    },
    //选择市
    choseCity(code, name) {
      this.citycode = code;
      this.city = name + "/";
      this.areacode = "";
      this.area = "";
      pca({
        type: "a",
        pcode: this.citycode,
      }).then((res) => {
        console.log(res, "地区数据 ");
        this.areaList = res.retRes;
      });
    },
    //选择区
    choseArea(code, name) {
      this.areacode = code;
      this.area = name;
      this.choseSSQ = false;
      this.adreess = this.province + this.city + this.area;
      school({
        provincecode: this.provincecode,
        citycode: this.citycode,
        areacode: this.areacode,
      }).then((res) => {
        this.schoolList = [];
        console.log(res, "学校列表");
        if (res.retInt == 1) {
          const data = res.retRes;
          this.schoolList = data;
          // this.schoolList.unshift({id:0,title:'手动输入'})
        } else if (res.retInt != 1) {
          this.$notify.error({
            title: "错误",
            message: res.retErr,
            duration: 2000,
            showClose: false,
          });
        }
      });
    },
    //选择学校
    changeSchool(e) {
      console.log(e, typeof this.school, this.school);
      if (typeof this.school == "string") {
        console.log("不存在的学校");
        console.log(this.school_id);
        //输入的不存在的学校就查询并创建
        if (this.provincecode == "") {
          this.$notify.error({
            title: "错误",
            message: "请先选择省市区",
            duration: 2000,
            showClose: false,
          });
        } else {
          checkschool({
            md5key: localStorage.getItem("md5key"),
            provincecode: this.provincecode,
            citycode: this.citycode,
            areacode: this.areacode,
            title: this.school,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "创建学校");
              this.school_id = res.retRes.id;
            } else {
              this.$notify.error({
                title: "错误",
                message: res.retErr,
                duration: 2000,
                showClose: false,
              });
            }
          });
        }
      } else if (typeof this.school == "number") {
        console.log("已存在的学校");
        this.school_id = e;
      }
    },
    //选择是否为班主任
    changeadviser(e) {
      this.isadviser = e;
    },
    //选择职务
    changeZhiwu(e) {
      this.zhiwu_id = e;
    },
    //选择学校
    changeGrade(e) {
      this.nianji_id = e;
      this.radio3 = e;
    },
    //提交完善个人信息
    submituserinfo() {
      if (!this.isadviser) {
        this.$message({
          message: "请选择是否为班主任",
          duration: 1000,
          showClose: false,
        });
      } else if (!this.radio3) {
        this.$message({
          message: "请选择年级",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.zhiwu_id) {
        this.$message({
          message: "请选择岗位职务",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.username) {
        this.$message({
          message: "请填写真实姓名",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.areacode) {
        this.$message({
          message: "请选择所在省市区",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.school_id) {
        this.$message({
          message: "请选择所在学校",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else {
        setuserinfo({
          md5key: localStorage.getItem("md5key"),
          school_id: this.school_id,
          kemu_id: this.radio1,
          nianji_id: this.radio3,
          zhiwu_id: this.zhiwu_id,
          is_bzr: this.isadviser,
          title: this.ninckname,
          true_name: this.username,
          account: this.account,
          provincecode: this.provincecode,
          citycode: this.citycode,
          areacode: this.areacode,
        }).then((res) => {
          if (res.retInt == 1) {
            this.dialogTableVisible = false;
            bm_activity({
              md5key: localStorage.getItem("md5key"),
              activity_id: this.active_id,
              school_id: this.school_id,
              kemu_id: this.kemu_id,
              nianji_id: this.nianji_id,
              zhiwu_id: this.zhiwu_id,
              is_bzr: this.isadviser,
              title: this.ninckname,
              true_name: this.username,
              account: this.account,
              provincecode: this.provincecode,
              citycode: this.citycode,
              areacode: this.areacode,
            }).then((res) => {
              if (res.retInt == 1 && res.retRes.is_gjjs == 1) {
                console.log(res, "报名成功");
                this.kfevm = res.retRes.ywy_file_url;
                this.signSuccess = true;
              } else if (res.retInt == 1 && res.retRes.is_gjjs != 1) {
                this.reload();
              }
            });
          }
        });
      }
    },
    //预约系列活动
    yuyue() {
      this.xilieyuyueshow = true;
    },
    //关闭报名成功弹窗
    signSuccessClose() {
      this.signSuccess = false;
      this.reload();
    },
    //前往全屏直播页
    goFullScreen() {
      if (this.lh_status == 0) {
        if (this.bm_status == 0) {
          this.$alert("请先报名活动", "您还未报名", {
            confirmButtonText: "确定",
          });
        } else if (this.bm_status == 1) {
          this.$router.push({
            name: "FullScreen",
            query: {
              id: this.active_id,
              seek: this.$refs.livePlayer
                ? this.$refs.livePlayer.getCurrentTime()
                : "",
              type: this.type_id,
              zhangjie_id: this.zhangjie_id,
            },
          });
        }
      } else {
        this.$message({
          message: "您已被拉黑，无法执行此操作",
          type: "warning",
          offset: 300,
        });
      }
    },
    //系列活动点击开始学习
    studyXl() {
      if (this.bm_status == 0) {
        this.xilieyuyueshow = true;
      } else {
        this.tapsRadio = 9;
        clearInterval(this.jieSeekTime);
        this.jieSeekTime = null;
        if (this.bm_status == 0) {
          this.xilieyuyueshow = true;
        } else {
          info_activityjie({
            md5key: localStorage.getItem("md5key"),
            id: this.zhangjie_id,
          }).then((res) => {
            console.log(res);
            this.zb_status = res.retRes.zb_status;
            this.zb_file_url = res.retRes.zb_file_url;
            this.video_file_url = res.retRes.video_file_url;
            if (res.retRes.video_file_url) {
              this.xiliezhezhao = false;
              const that = this;
              setTimeout(() => {
                this.$refs.livePlayer.setCurrentTime(this.seek);
              }, 200);
              this.jieSeekTime = setInterval(() => {
                playtimes_activity({
                  md5key: localStorage.getItem("md5key"),
                  id: this.zhangjie_id,
                  times: that.$refs.livePlayer.getCurrentTime(),
                });
              }, 60000);
            } else {
              this.xiliezhezhao = true;
            }
          });
        }
      }
    },
    //前往相关系列活动页
    goacdetails() {
      this.$router.push({
        name: "ActiveDetails",
        query: {
          id: 3722,
        },
      });
    },
    //tab栏切换
    handleClickTabs() {
      console.log(123);
    },
    //点击播放
    startvideo() {
      // console.log(this.$refs.startvideo);
      this.$refs.startvideo.play();
      this.playFlag = false;
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    //心得分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      list_activityhdxd({
        md5key: localStorage.getItem("md5key"),
        activity_id: this.active_id,
        page: this.page,
        page_size: 5,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "活动心得列表");
          this.tableData = res.retRes;
          this.retCounts = res.retCounts;
        }
      });
    },
    //课件分页
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      list_activitykejian({
        md5key: localStorage.getItem("md5key"),
        activity_id: this.active_id,
        page: this.page,
        page_size: 5,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "课件下载列表");
          this.kejianLists = res.retRes;
          this.retCounts2 = res.retCounts;
        }
      });
    },
    //活动评价轮播左按钮
    picLeft() {
      const picWidth = 255;
      this.picMoveWidth += 255;
      let leftN = document.getElementsByClassName("picLists")[0];
      leftN.style.left = this.picMoveWidth + "px";
      leftN.style.transition = "all 0.5s ease-in-out";
      console.log(this.picMoveWidth);
      if (this.picMoveWidth > 0) {
        leftN.style.left = -picWidth * (this.picLists.length - 3) + "px";
        this.picMoveWidth = -picWidth * (this.picLists.length - 3);
      }
    },
    //活动评价轮播右按钮
    picRight() {
      const picWidth = 255;
      this.picMoveWidth -= 255;
      let leftN = document.getElementsByClassName("picLists")[0];
      leftN.style.left = this.picMoveWidth + "px";
      leftN.style.transition = "all 0.5s ease-in-out";
      console.log(this.picMoveWidth);
      if (this.picMoveWidth < -picWidth * (this.picLists.length - 3)) {
        leftN.style.left = 0 + "px";
        this.picMoveWidth = 0;
      }
    },
    //活动风采轮播左按钮
    styleLeft() {
      const styPicWidth = 186;
      this.stykeMoveWidth += 186;
      let leftN = document.getElementsByClassName("styleLists")[0];
      leftN.style.left = this.stykeMoveWidth + "px";
      leftN.style.transition = "all 0.5s ease-in-out";
      console.log(this.stykeMoveWidth);
      if (this.stykeMoveWidth > 0) {
        leftN.style.left = -styPicWidth * (this.fcPicList.length - 4) + "px";
        this.stykeMoveWidth = -styPicWidth * (this.fcPicList.length - 4);
      }
    },
    //活动风采轮播右按钮
    styleRight() {
      const styPicWidth = 186;
      this.stykeMoveWidth -= 186;
      let leftN = document.getElementsByClassName("styleLists")[0];
      leftN.style.left = this.stykeMoveWidth + "px";
      leftN.style.transition = "all 0.5s ease-in-out";
      console.log(this.stykeMoveWidth);
      if (this.stykeMoveWidth == -styPicWidth * (this.fcPicList.length - 4)) {
        leftN.style.left = -styPicWidth * (this.fcPicList.length - 4) + "px";
      }
      if (this.stykeMoveWidth < -styPicWidth * (this.fcPicList.length - 4)) {
        leftN.style.left = 0 + "px";
        this.stykeMoveWidth = 0;
      }
    },
    //调查问卷按钮
    wenjuan() {
      this.wenjuanFlag = true;
    },
    //问卷提交
    submit() {
      this.wenjuanFlag = false;
    },
    zh_uploadFile() {
      if (this.lh_status == 0 && this.bm_status == 1) {
        this.$refs.evfile.click();
      } else if (this.bm_status == 0) {
        this.$message({
          message: "请报名后再上传作业",
          type: "warning",
          duration: 1000,
          offset: 300,
        });
      } else if (this.lh_status == 1) {
        this.$message({
          message: "您已被拉黑，无法执行此操作",
          type: "warning",
          duration: 1000,
          offset: 300,
        });
      }
    },
    zh_uploadFile_change(evfile) {
      // console.log(evfile);
      this.zyname = evfile.target.files[0].name;
      //file是选择的文件对象
      return new Promise((resolve, reject) => {
        qiniuconfig({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          //获取后台返的token  和域名
          this.baseurl = res.retRes.file_base;
          let uptoken = res.retRes.qiniu_token;
          let upload_path = res.retRes.upload_path;
          let file = evfile.target.files[0];
          let key =
            upload_path +
            timeStamp2String(new Date().getTime(), 12) +
            "/" +
            new Date().getTime() +
            Math.floor(Math.random() * 1000) +
            file.name; //这是上船后返回的文件名，这里为了避免重复，加上了时间戳和随机数
          var config = {
            useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
            // region: qiniu.region.z0, //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域。
            domain: "https://static.idianjiao.com", //配置好的七牛云域名
            chunkSize: 100, //每个分片的大小，单位mb，默认值3
            forceDirect: true, //直传还是断点续传方式，true为直传
          };
          var putExtra = {
            fname: file.name, //文件原始文件名
            params: {},
            mimeType: [] || null,
          };
          var observable = qiniu.upload(file, key, uptoken, putExtra, config);
          observable.subscribe({
            next: (result) => {
              //主要用来展示进度
            },
            error: (err) => {
              //上传错误后触发
              console.log(err);
              reject(err);
            },
            complete: (result) => {
              //上传成功后触发。包含文件地址。
              // console.log(result);
              // console.log(this.baseurl + "/" + result.key);
              // this.file_url = this.baseurl + "/" + result.key;
              this.kj_download_file_url = this.baseurl + "/" + result.key;
              resolve(result);
              console.log(this.kj_download_file_url);
              tjzy_activity({
                md5key: localStorage.getItem("md5key"),
                activity_id:
                  this.type_id == 2 ? this.danyuanid : this.active_id,
                download_file_url: this.kj_download_file_url,
              }).then((res) => {
                if (res.retInt == 1) {
                  this.zczyid = res.retRes.id;
                  console.log(res, "提交作业成功");
                  this.$notify.closeAll();
                  // this.workSubmit = "作业已提交";
                  this.$notify({
                    message: "作业已上传",
                    duration: 2000,
                    showClose: false,
                    offset: 300,
                  });
                } else {
                  this.$notify.closeAll();
                  this.$notify({
                    message: "作业提交失败",
                    duration: 2000,
                    showClose: false,
                    offset: 300,
                  });
                }
              });
            },
          });
        });
      });
    },
    //预览作业
    ylzy() {},
    //确认提交作业
    sureTj() {
      console.log(this.zczyid);
      settj_activityzy({
        md5key: localStorage.getItem("md5key"),
        id: this.zczyid,
        tj_status: 1,
      }).then((res) => {
        console.log(res, "tijiao");
        if (res.retInt == 1) {
          this.$notify.closeAll();
          // this.workSubmit = "作业已提交";
          this.$notify({
            message: "作业提交成功",
            duration: 2000,
            showClose: false,
            offset: 300,
          });
          this.zytcshow = false;
          this.getactiveRes();
          this.workSubmit = "重新提交";
        }
      });
    },
    //前往样书详情
    goProDetails() {
      // console.log(this.product_info.id)
      this.$router.push({
        name: "ProductDetails",
        query: {
          id: this.product_info.id,
        },
      });
    },
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
/* 用于分页 */
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
.page1 {
  width: 740px;
  margin: 0 auto;
  margin-top: 40px;
}
.el-pagination {
  text-align: center;
  /* margin: 20px 80px 20px 0; */
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #08a579 !important;
}
.el-pagination .el-select .el-input .el-input__inner:hover {
  border-color: #08a579 !important;
}
.el-select .el-input__inner:focus {
  border-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}
.el-pager li:hover {
  color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff !important;
}
.el-dialog__headerbtn {
  /* color: #08a579; */
  position: absolute;
  top: 20px;
  right: 40px;
  width: 0;
  height: 0;
}
.el-dialog__headerbtn .el-dialog__close:hover {
  color: #08a579;
}
/* 用于弹窗 */
.el-button:hover {
  background: #fff;
  border-color: #08a579;
  color: #333;
}
.el-button--primary {
  background: #08a579 !important;
  border-color: #08a579 !important;
}
.el-button--primary:hover {
  background: #08a579 !important;
  border-color: #08a579;
  color: #fff;
}
/* .el-icon-close:before {
  color: #08a579;
} */

/* 用于图片预览大图关闭按钮 */
.el-image-viewer__btn {
  opacity: 1;
}
</style>
<style lang="less" scoped>
#container {
  background-color: #f0f2f5;
  //nothing
  .nothing {
    margin-top: 100px;
    text-align: center;
    p {
      margin-top: 20px;
      font-size: 14px;
      color: #666;
    }
  }
  .signSuccessBox {
    /deep/.el-dialog__header {
      padding: 0;
    }
    /deep/.el-dialog {
      border-radius: 20px;
    }
    /deep/.el-dialog__body {
      padding: 0;
    }
    /deep/.el-icon-close:before {
      color: #fff;
    }
    .top {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 320px;
      height: 240px;
      background-image: url("../../assets/img/bmsbg01.png");
      border-radius: 20px 20px 20px 20px;
      background-size: 100%;
      img {
        margin-top: 54px;
        text-align: center;
        width: 64px;
        height: 64px;
      }
      h3 {
        text-align: center;
        font-size: 20px;
        color: #ffffff;
        line-height: 72px;
      }
    }
    .signSuccessContent {
      overflow: hidden;
      h3 {
        margin: 25px auto;
        width: 320px;
        text-align: center;
        font-size: 20px;
        color: #f5484b;
      }
      .pic {
        margin: 0 auto;
        margin-bottom: 10px;
        width: 200px;
        height: 200px;
        border: 1px solid #dedede;
        img {
          width: 200px;
          height: 200px;
        }
      }
      p {
        margin-bottom: 15px;
        text-align: center;
        font-size: 16px;
        color: #969799;
      }
    }
  }
  .yuyueevm {
    /deep/.el-dialog__header {
      padding: 0;
    }
    /deep/.el-dialog {
      margin-top: 13vh !important;
      border-radius: 20px;
    }
    /deep/.el-dialog__body {
      padding: 0;
      height: 400px;
    }
    .yyevmContent {
      width: 400px;
      height: 400px;
      border-radius: 20px;
      .top {
        width: 400px;
        height: 80px;
        border-radius: 20px 20px 0px 0px;
        background: linear-gradient(0deg, #ffffff, #d2f9ee);
      }
      h3 {
        position: relative;
        top: -30px;
        margin: 0 auto;
        text-align: center;
        font-size: 18px;
        width: 324px;
        line-height: 30px;
      }
      .signSuccessContent {
        overflow: hidden;
        .pic {
          margin: 0 auto;
          margin-bottom: 10px;
          width: 160px;
          height: 160px;
          border: 1px solid #dedede;
          img {
            width: 160px;
            height: 160px;
          }
        }
        p {
          margin-bottom: 15px;
          text-align: center;
          font-size: 14px;
          color: #969799;
        }
      }
    }
  }
  .content {
    //预览
    /deep/.el-dialog {
      margin-top: 3vh !important;
      padding: 20px;
      border-radius: 14px;
      // width: 880px !important;
    }
    /deep/.el-dialog__header {
      padding-top: 40px;
    }
    /deep/.el-dialog__body {
      padding: 0;
      .picList {
        height: 80vh;
        overflow-y: scroll;
        .pic {
          img {
            width: 810px;
          }
        }
      }
      ::-webkit-scrollbar {
        width: 7px;
      }
      ::-webkit-scrollbar-track {
        background-color: #f5f5f5;
        -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
      }
      ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 5px;
      }
      ::-webkit-scrollbar-button {
        background-color: #eee;
        display: none;
      }
      ::-webkit-scrollbar-corner {
        background-color: black;
      }
    }
    /deep/.el-icon-close:before {
      color: #08a579;
    }
  }
  .top {
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    .bread {
      display: flex;
      margin: 20px auto;
      font-size: 14px;
      font-family: Microsoft YaHei;
      // font-weight: 400;
      color: #626366;
      line-height: 24px;
      .el-breadcrumb {
        font-size: 14px;
        line-height: 24px;
        /deep/.el-breadcrumb__item:last-child {
          .el-breadcrumb__inner {
            color: #08a579;
          }
        }
        /deep/.el-breadcrumb__inner.is-link {
          font-weight: normal;
        }
      }
    }
  }
  .activeTop {
    display: flex;
    margin: 0 auto;
    width: 1200px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    .videoBox {
      position: relative;
      margin: 20px;
      width: 600px;
      height: 338px;
      cursor: pointer;
      overflow: hidden;
      video {
        object-fit: fill;
        width: 100%;
        height: 100% !important;
      }
    }
    .lhUser {
      position: relative;
      background-color: #000;
      background: rgb(0, 0, 0, 50%);
      color: #fff;
      font-size: 16px;
      text-align: center;
      overflow: hidden;
      .zhezhao {
        position: relative;
        position: absolute;
        top: 0;
        width: 600px;
        height: 338px;
        border-radius: 10px;
        overflow: hidden;
        .block {
          width: 600px;
          height: 338px;
          background: #000000;
          opacity: 0.4;
          border-radius: 10px;
        }
        img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateY(-50%) translateX(-50%);
          width: 58px;
          height: 58px;
          cursor: pointer;
        }
      }
      .videoBg {
        position: relative;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translateX(-50%);
        p {
          position: absolute;
          top: 18%;
          left: 10%;
          font-size: 16px;

          i {
            position: relative;
            top: 4px;
            left: -10px;
            font-size: 24px;
            font-weight: 100;
          }
        }
      }
    }
    .ohterVideo {
      position: fixed;
      right: 10px;
      bottom: 120px;
      width: 320px;
      height: 180px;
    }
    .msg {
      position: relative;
      h2 {
        width: 490px;
        margin: 30px 0px 10px 0;
        font-size: 20px;
        line-height: 32px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        cursor: pointer;
        span {
          display: inline-block;
          // margin-top: 10px;
          position: relative;
          top: -4px;
          text-align: center;
          font-size: 12px;
          width: 108px;
          height: 24px;
          line-height: 24px;
          background: #f2fefb;
          border-radius: 4px;

          img {
            position: relative;
            top: 2px;
            left: -2px;
            width: 10px;
            height: 12px;
          }
          color: #08a579;
        }
      }
      p {
        color: #969799;
        font-size: 14px;
        line-height: 34px;
        span {
          color: #333;
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 35px;
        width: 540px;
        height: 140px;
        background: #f5f7fa;
        border: 1px solid #ebeff5;
        .ewm {
          display: flex;
          align-items: center;
          .sao {
            margin-left: 20px;
            p {
              font-size: 12px;
              line-height: 18px;
              text-align: center;
            }
          }
          img {
            // vertical-align: text-bottom;
            margin-left: 10px;
            width: 120px;
            height: 120px;
          }
        }
        button {
          display: block;
          margin-right: 40px;
          width: 140px;
          height: 40px;
          background: #f05659;
          border-radius: 6px;
          border: 0;
          font-size: 16px;
          color: #fff;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    margin: 20px auto;
    width: 1200px;
    .left {
      width: 800px;
      // height: 989px;
      background: #ffffff;
      border-radius: 10px;
      /deep/.el-tabs {
        margin-top: 20px;
      }
      /deep/.el-tabs__nav-wrap {
        padding-left: 30px;
        border-bottom: 1px solid #ccc;
      }
      /deep/.el-tabs__nav-wrap::after {
        height: 0px;
      }
      /deep/.el-tabs__header {
        margin: 0;
        user-select: none;
      }
      /deep/.el-tabs__item {
        margin: 13px 0;
        line-height: 16px;
        height: 16px;
        border-right: 1px solid #ccc;
        color: #939599;
      }
      /deep/.el-tabs__item:last-child {
        border-right: 0;
      }
      /deep/.el-tabs__active-bar {
        background-color: #08a579;
      }
      /deep/.el-tabs__nav-wrap::after {
        background-color: #fff;
      }
      /deep/.el-tabs__item.is-active {
        color: #333;
        font-weight: 600;
      }

      .tapsHeader {
        display: flex;
        margin-top: 20px;
        margin-left: 10px;
        // width: 100%;
        border-bottom: 1px solid #e6e6e6;
        .taps {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 5px;
          width: 80px;
          cursor: pointer;
          user-select: none;
          .tapsTitle {
            margin-bottom: 10px;
            font-size: 14px;
            color: #939599;
          }
          span {
            display: inline-block;
            width: 32px;
            height: 3px;
          }
        }
        .choseTaps {
          .tapsTitle {
            margin-bottom: 10px;
            font-size: 16px;
            color: #333333;
          }
          span {
            background: #08a579;
          }
        }
      }
      .tab1 {
        margin: 20px auto;
        width: 740px;

        font-size: 14px;
        color: #626366;
        line-height: 30px;
        /deep/div {
          display: flex;
          flex-direction: column;
        }
        /deep/img {
          width: 100% !important;
          height: auto !important;
        }
      }
      .tab11 {
        margin: 20px auto;
        width: 740px;
      }
      .tab8 {
        margin: 0 auto;
        padding-bottom: 48px;
        width: 760px;
        .mltitle {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20px;
          height: 54px;
          border-radius: 10px;
          background-color: #f5f7fa;
          cursor: pointer;
          h3 {
            margin-left: 20px;
            font-size: 16px;
            color: #000;
            line-height: 54px;
          }
          .jiantou {
            img {
              margin-right: 20px;
              width: 10px;
              height: 5px;
            }
          }
        }
        .muluLists {
          display: flex;
          align-items: center;

          width: 760px;
          height: 78px;
          border-bottom: 1px solid #f0f3f5;
          .leftTips {
            width: 4px;
            height: 72px;
            background-color: #fc8d2f;
          }
          .muluIndex {
            margin-left: 20px;
            font-size: 20px;
          }
          .mulumsg {
            display: flex;
            flex-direction: column;
            margin-left: 35px;
            color: #333;
            .listTitle {
              margin-bottom: 10px;
              width: 490px;
              font-size: 14px;
            }
            .mulubottom {
              display: flex;
              font-size: 12px;
              .studyjd {
                margin-left: 30px;
              }
            }
          }
          .muluright {
            margin-left: 90px;
            .zhuangtai {
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #333;
              cursor: pointer;
              img {
                margin-right: 8px;
                width: 16px;
              }
            }
          }
        }
        .nowmulu {
          background-color: #f2fefb;
          color: #08a579;
          .mulumsg {
            color: #08a579;
          }
          .muluright {
            span {
              color: #08a579;
            }
          }
        }
        .beforemulu {
          // background-color: #F2FEFB;
          color: #b3b3b3;
          .mulumsg {
            color: #b3b3b3;
          }
          .muluright {
            span {
              color: #b3b3b3;
            }
          }
        }
        .submitWork {
          .mulumsg {
            .mulubottom {
              span {
                color: #08a579;
                cursor: pointer;
                text-decoration: underline;
              }
            }
          }
          .zydosome {
            margin-left: 80px;
            .anniu {
              text-align: center;
              line-height: 28px;
              color: #999;
              font-size: 12px;
              width: 80px;
              height: 28px;
              border: 1px solid #999999;
              border-radius: 14px;
              cursor: pointer;
            }
            .tj {
              border: 1px solid #08a579;
              color: #08a579;
            }
          }
        }
        /deep/.el-dialog {
          margin-top: 20vh !important;
          padding: 20px 40px;
          border-radius: 14px;
          // width: 880px !important;
        }
        /deep/.el-dialog__header {
          padding-top: 5px;
        }
        .submitzyBox {
          h4 {
            text-align: center;
            font-size: 18px;
            color: #333;
          }
          h5 {
            font-weight: normal;
            font-size: 14px;
            color: #646566;
            line-height: 26px;
          }
          p {
            margin-bottom: 30px;
            color: #969799;
            line-height: 26px;
          }
          .caozuo {
            display: flex;
            margin-top: 13px;
            .fujian {
              position: relative;
              display: flex;
              align-items: center;
              width: 615px;
              height: 40px;
              border: 1px solid #dee0e3;
              input {
                padding-left: 20px;
                width: 500px;
                height: 40px;
                background-color: #fff;
                border: none;
                outline: none;
              }
              span {
                position: absolute;
                right: -3px;
                display: inline-block;
                width: 120px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 14px;
                color: #fff;
                background-color: #08a579;
                border-radius: 4px;
                cursor: pointer;
              }
            }
            .yulan {
              margin-left: 20px;
              text-align: center;
              width: 120px;
              height: 40px;
              border: 1px solid #dee0e3;
              border-radius: 4px;
              line-height: 40px;
              font-size: 14px;
              color: #999;
              cursor: pointer;
            }
          }
          .submitsure {
            margin: 0 auto;
            margin-top: 60px;
            line-height: 40px;
            text-align: center;
            width: 120px;
            height: 40px;
            color: #fff;
            background: #08a579;
            border-radius: 4px;
            cursor: pointer;
          }
        }
        .zyyulan {
          /deep/.el-dialog {
            margin-top: 3vh !important;
            padding: 20px 40px;
            border-radius: 14px;
            // width: 880px !important;
          }
        }
      }
      .tab2 {
        margin: 20px auto;
        width: 740px;
        .msg {
          width: 740px;
          // margin-left: 40px;
          // border: 1px solid #dee0e3;
          border-bottom: 0;
          /deep/.cell {
            font-size: 14px;
            color: #646566;
          }
          /deep/.el-table--small {
            border: 1px solid #dee0e3;
          }
          /deep/.el-table th.el-table__cell {
            background-color: #fafafa;
          }

          .dosome {
            color: #08a579;
            cursor: pointer;
            font-size: 14px;
          }
        }
      }
      .tab3 {
        margin: 20px auto;
        width: 100%;
        .title {
          display: flex;
          margin-top: 20px;
          margin-bottom: 20px;
          span {
            display: inline-block;
            position: relative;
            top: 3px;
            width: 4px;
            height: 14px;
            background: #08a579;
            border-radius: 2px;
          }
          h3 {
            margin-left: 10px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            color: #333333;
          }
        }
        .teachers {
          position: relative;
          margin: 0 auto;
          margin-bottom: 40px;
          width: 740px;

          .anniu {
            display: inline-block;
            width: 25px;
            height: 35px;
            background: #000000;
            opacity: 0.3;
            color: #fff;
            font-size: 16px;
            line-height: 33px;
            text-align: center;
            cursor: pointer;
          }
          .leftN {
            position: absolute;
            top: 50%;
            left: -30px;
            transform: translateY(-50%);
            border-radius: 0px 18px 18px 0px;
          }
          .rightN {
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
            right: -30px;
            border-radius: 18px 0px 0px 18px;
          }
          .picDeatils {
            margin: 0 auto;
            position: relative;
            width: 740px;
            height: 400px;
            overflow: hidden;
            ul {
              display: flex;
              justify-content: space-around;
              position: absolute;
              left: 0;

              li {
                // margin: 0 15px;
                margin-right: 30px;
                width: 225px;
                height: 400px;
                // background-color: green;
                /deep/.el-image__inner {
                  width: 225px;
                  height: 400px;
                  object-fit: cover;
                }
              }
            }
          }
        }
        .activeStyle {
          position: relative;
          margin-bottom: 60px;
          .anniu {
            display: inline-block;
            width: 25px;
            height: 35px;
            background: #000000;
            opacity: 0.3;
            color: #fff;
            font-size: 16px;
            line-height: 33px;
            text-align: center;
            cursor: pointer;
            i {
              color: #fff;
            }
          }
          .leftN {
            position: absolute;
            top: 50%;
            left: 0px;
            transform: translateY(-50%);
            border-radius: 0px 18px 18px 0px;
            i {
              margin-right: 5px;
            }
          }
          .rightN {
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
            right: 0px;
            border-radius: 18px 0px 0px 18px;
            i {
              margin-left: 5px;
            }
          }
          .styleDeatils {
            margin: 0 auto;
            position: relative;
            width: 740px;
            height: 130px;
            overflow: hidden;
            ul {
              display: flex;
              justify-content: space-around;
              position: absolute;
              left: 0;
              li {
                margin-right: 10px;
                width: 176px;
                height: 129px;
                background-color: #acb1b9a9;
                // img {
                //   width: 176px;
                //   height: 129px;
                //   object-fit: cover;
                // }
                /deep/.el-image__preview {
                  width: 176px;
                  height: 129px;
                }
              }
            }
          }
        }
      }
      .tab4 {
        margin: 20px auto;
        .box {
          position: relative;
          margin: 30px;
          padding-bottom: 20px;
          display: flex;
          // justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e6e6e6;
          img {
            margin: 5px;
            margin-right: 20px;
            width: 44px;
            height: 50px;
          }
          p {
            font-size: 14px;
            color: #626366;
          }
          span {
            position: absolute;
            right: 60px;
            a {
              margin-left: 20px;
              color: #188cfc;
              font-size: 14px;
              cursor: pointer;
            }
          }
        }
        .dqkf {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 20px;
          text-align: center;
          p {
            position: relative;
            top: 30px;
            font-size: 18px;
            font-weight: 600;
            color: #333;
            span {
              color: #f25555;
            }
          }
          .pic {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 360px;
            height: 360px;
            background-image: url('../../assets/img/dqkf.png');
            background-size: 100%;
            background-repeat: no-repeat;
            img {
              width: 220px;
              height: 220px;
            }
          }
        }
      }
      .tab5 {
        position: relative;
        margin: 20px auto;
        width: 740px;
        min-height: 345px;
        h4 {
          margin-bottom: 15px;
          font-size: 16px;
        }
        p {
          margin: 0 auto;
          min-height: 100px;
          font-size: 14px;
          color: #626366;
          line-height: 28px;
          // text-align: center;
          /deep/img {
            max-width: 100%;
            height: auto;
          }
        }
        .submitZy {
          // margin-left: 330px;
          // margin: 0 auto;
          // margin-top: 100px;
          // position: absolute;
          // bottom: 20px;
          // left: 50%;
          margin: 0 auto;
          // transform: translateX(-50%);
          width: 120px;
          height: 40px;
          background: #08a579;
          border-radius: 4px;
          text-align: center;
          color: #fff;
          font-size: 14px;
          line-height: 40px;
          cursor: pointer;
        }
        span {
          display: inline-block;
        }
        /deep/.el-dialog {
          margin-top: 20vh !important;
          padding: 20px 40px;
          border-radius: 14px;
          // width: 880px !important;
        }
        /deep/.el-dialog__header {
          padding-top: 5px;
        }
        .submitzyBox {
          h4 {
            text-align: center;
            font-size: 18px;
            color: #333;
          }
          h5 {
            font-weight: normal;
            font-size: 14px;
            color: #646566;
            line-height: 26px;
          }
          p {
            margin-bottom: 30px;
            color: #969799;
            line-height: 26px;
          }
          .caozuo {
            display: flex;
            margin-top: 13px;
            .fujian {
              position: relative;
              display: flex;
              align-items: center;
              width: 615px;
              height: 40px;
              border: 1px solid #dee0e3;
              input {
                padding-left: 20px;
                width: 500px;
                height: 40px;
                background-color: #fff;
                border: none;
                outline: none;
              }
              span {
                position: absolute;
                right: -3px;
                display: inline-block;
                width: 120px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 14px;
                color: #fff;
                background-color: #08a579;
                border-radius: 4px;
                cursor: pointer;
              }
            }
            .yulan {
              margin-left: 20px;
              text-align: center;
              width: 120px;
              height: 40px;
              border: 1px solid #dee0e3;
              border-radius: 4px;
              line-height: 40px;
              font-size: 14px;
              color: #999;
              cursor: pointer;
            }
          }
          .submitsure {
            margin: 0 auto;
            margin-top: 60px;
            line-height: 40px;
            text-align: center;
            width: 120px;
            height: 40px;
            color: #fff;
            background: #08a579;
            border-radius: 4px;
            cursor: pointer;
          }
        }
        .zyyulan {
          /deep/.el-dialog {
            margin-top: 3vh !important;
            padding: 20px 40px;
            border-radius: 14px;
            // width: 880px !important;
          }
        }
      }
      .tab6 {
        iframe {
          ::-webkit-scrollbar {
            width: 0px;
          }
          ::-webkit-scrollbar-track {
            background-color: #f5f5f5;
            -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
          }
          ::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 5px;
          }
          ::-webkit-scrollbar-button {
            background-color: #eee;
            display: none;
          }
          ::-webkit-scrollbar-corner {
            background-color: black;
          }
        }
        // position: relative;
        // margin: 20px auto;
        // width: 740px;
        // p {
        //   font-size: 14px;
        //   color: #626366;
        // }
        // .wenjuan {
        //   display: inline-block;
        //   margin-left: 330px;
        //   margin-top: 100px;
        //   width: 120px;
        //   height: 40px;
        //   background: #08a579;
        //   border-radius: 4px;
        //   text-align: center;
        //   color: #fff;
        //   font-size: 16px;
        //   line-height: 40px;
        //   cursor: pointer;
        // }
        // /deep/.el-dialog {
        //   border-radius: 20px;
        // }
        // /deep/.el-dialog__body {
        //   padding: 0;
        //   .qsContent {
        //     margin-left: 60px;
        //     h2 {
        //       margin-bottom: 30px;
        //       font-size: 20px;
        //       color: #333;
        //       text-align: center;
        //     }
        //     p {
        //       margin-bottom: 30px;
        //       color: #646566;
        //       font-size: 14px;
        //     }
        //     .quesAns {
        //       margin-bottom: 30px;
        //       .question {
        //         display: flex;
        //         margin-bottom: 20px;
        //         p {
        //           margin: 0;
        //         }
        //       }
        //       .ans {
        //         textarea {
        //           width: 800px;
        //           height: 200px;
        //         }
        //       }
        //     }
        //   }
        //   button {
        //     position: relative;
        //     left: 741px;
        //     margin-bottom: 30px;
        //     width: 120px;
        //     height: 40px;
        //     background: #08a579;
        //     border-radius: 4px;
        //     color: #fff;
        //     line-height: 40px;
        //     border: 0;
        //     cursor: pointer;
        //   }
        // }
      }
    }
    .right {
      width: 380px;
      height: 440px;
      background: #ffffff;
      .title2 {
        display: flex;
        margin-top: 20px;
        span {
          display: inline-block;
          position: relative;
          top: 5px;
          width: 4px;
          height: 20px;
          background: #08a579;
          border-radius: 2px;
        }
        h3 {
          margin-left: 10px;
          font-size: 20px;
          font-family: Microsoft YaHei;
          color: #333333;
        }
      }
      .box {
        text-align: center;
        .pic {
          margin-bottom: 20px;
          text-align: center;
          width: 200px;
          height: 200px;
          margin: 0 auto;
          img {
            margin-top: 40px;
            height: 133px;
            object-fit: cover;
          }
        }
        h3 {
          margin: 0 auto;
          margin-bottom: 20px;
          width: 218px;
          font-size: 14px;
          color: #333;
        }
        p {
          margin: 0 auto;
          margin-bottom: 30px;
          width: 321px;
          font-size: 14px;
          color: #939599;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box; //使用自适应布局
          -webkit-line-clamp: 2; //设置超出行数，要设置超出几行显示省略号就把这里改成几
          -webkit-box-orient: vertical;
        }
        span {
          display: inline-block;
          width: 120px;
          height: 40px;
          background: #08a579;
          border-radius: 4px;
          color: #fff;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
        }
      }
    }
  }
  .activekctc {
    /deep/.el-dialog {
      margin-top: 5vh !important;
      padding: 0px 30px;
      border-radius: 14px;
      height: 730px;
    }
    /deep/.el-dialog__header {
      padding-top: 25px;
    }
    /deep/.el-dialog__body {
      padding: 0 0px;
    }
    .yytxBox {
      h3 {
        text-align: center;
        font-size: 18px;
        color: #333;
      }
      .tcContent {
        display: flex;
        justify-content: space-between;
        margin-top: 32px;
        .tcleft {
          width: 310px;
          height: 550px;
          img {
            width: 310px;
          }
        }
        .tcright {
          width: 600px;
          height: 550px;
          overflow-y: scroll;
          .danyuan {
            margin-bottom: 20px;
            .mltitle {
              display: flex;
              justify-content: space-between;
              align-items: center;
              // margin-top: 20px;
              height: 54px;
              border-radius: 10px;
              background-color: #f5f7fa;
              cursor: pointer;
              h3 {
                margin-left: 20px;
                font-size: 16px;
                color: #000;
                line-height: 54px;
              }
              .jiantou {
                img {
                  margin-right: 20px;
                  width: 10px;
                  height: 5px;
                }
              }
            }
            .mltitle:last-child {
              margin-top: 0;
            }
            .muluLists {
              display: flex;
              align-items: center;

              width: 600px;
              height: 78px;
              border-bottom: 1px solid #f0f3f5;
              .leftTips {
                width: 4px;
                height: 72px;
                background-color: #fc8d2f;
              }
              .muluIndex {
                margin-left: 20px;
                font-size: 20px;
              }
              .mulumsg {
                display: flex;
                flex-direction: column;
                margin-left: 35px;
                color: #333;
                .listTitle {
                  margin-bottom: 10px;
                  width: 330px;
                  font-size: 14px;
                }
                .mulubottom {
                  display: flex;
                  font-size: 12px;
                  .studyjd {
                    margin-left: 30px;
                  }
                }
              }
              .muluright {
                margin-left: 90px;
                .zhuangtai {
                  display: flex;
                  align-items: center;
                  font-size: 14px;
                  color: #333;
                  cursor: pointer;
                  img {
                    margin-right: 8px;
                    width: 16px;
                  }
                }
              }
            }
            .nowmulu {
              background-color: #f2fefb;
              color: #08a579;
              .mulumsg {
                color: #08a579;
              }
              .muluright {
                span {
                  color: #08a579;
                }
              }
            }
            .beforemulu {
              // background-color: #F2FEFB;
              color: #b3b3b3;
              .mulumsg {
                color: #b3b3b3;
              }
              .muluright {
                span {
                  color: #b3b3b3;
                }
              }
            }
          }
        }
        ::-webkit-scrollbar {
          width: 0px;
        }
        ::-webkit-scrollbar-track {
          background-color: #f5f5f5;
          -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
          border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 5px;
        }
        ::-webkit-scrollbar-button {
          background-color: #eee;
          display: none;
        }
        ::-webkit-scrollbar-corner {
          background-color: black;
        }
      }
      .dosome {
        margin: 30px auto;
        text-align: center;
        line-height: 40px;
        color: #fff;
        width: 120px;
        height: 40px;
        background: #08a579;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
  //首次弹出框的样式
  .userinfoBox {
    .chose {
      position: relative;
      margin-left: 40px;
      cursor: pointer;
      h3 {
        // margin: 10px 0;
        margin: 0 30px 20px 0;
        text-align: center;
      }
      .el-form {
        width: 400px;
        user-select: none;
      }
      .el-input {
        width: 400px;
      }
      .el-select {
        width: 400px;
      }
      /deep/.el-form-item__content {
        margin-left: 40px;
      }
      /deep/.el-form-item__label {
        text-align: left;
      }
      /deep/.el-cascader .el-input {
        width: 400px;
      }
      .indput {
        position: relative;
      }
      input {
        padding-left: 15px;
        color: #666;
        width: 382px;
        height: 30px;
        border: 0;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        outline: none;
        background: #fff;
        cursor: pointer;
      }
      .jiantou {
        position: absolute;
        top: 7px;
        right: -81px;
        color: #999;
        font-size: 15px;
      }
      .adreess {
        position: relative;
        .select_color {
          color: #08a579;
          font-weight: 600;
          i {
            color: #08a579;
          }
        }
        // .icon_style {
        //   transform: rotate(180deg);
        // }
        .adreessBox {
          display: flex;
          position: absolute;
          top: 40px;
          left: 0;
          z-index: 1000;
          background-color: #fff;
          box-shadow: 0px 0px 20px 4px #ccc;
          border-radius: 4px;
          transition: 1s;
          .box {
            margin-top: 10px;
            padding: 0px 15px 10px 40px;
            width: 170px;
            height: 250px;
            -ms-overflow-style: none; /* IE 10+ */
            scrollbar-width: none; /* Firefox */
            overflow-y: scroll;
            .list {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 40px;
              cursor: pointer;
            }
          }
          .preBox {
            border-right: 1px solid #ccc;
          }
          .cityBox {
            border-right: 1px solid #ccc;
          }
          ::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }
        }
      }
      p {
        margin: 20px 0;
        margin-bottom: 20px;
        color: #646566;
      }
      .taps {
        display: flex;
        flex-wrap: wrap;
        .classRadio {
          display: flex;
          margin-right: 79px;
          .tips {
            position: relative;
            top: 2px;
            margin-right: 8px;
            width: 14px;
            height: 14px;
            border: 1px solid #cccccc;
            border-radius: 100%;
            line-height: 12px;
            text-align: center;
            span {
              display: inline-block;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%);
              width: 9px;
              height: 9px;
              background-color: #fff;
              border-radius: 100%;
            }
          }
          .tips2 {
            border: 1px solid #08a579;

            span {
              background-color: #08a579;
            }
          }
          p {
            margin: 0;
          }
        }
      }
      .tab2 {
        .classRadio {
          margin-bottom: 10px;
        }
      }
      .submitSet {
        position: absolute;
        right: 20px;
        bottom: -80px;
        width: 120px;
        height: 40px;
        background: #08a579;
        color: #fff;
        border-radius: 6px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
    }
    /deep/.el-dialog--center {
      border-radius: 10px;
      padding-bottom: 80px;
    }
    /deep/.el-dialog__header {
      padding: 0;
      padding-top: 20px;
    }
  }
}
</style>
